<template>
  <div class="blog-home">
    <!-- 导航栏 -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">文章</el-menu-item>
      <el-menu-item index="3">归档</el-menu-item>
      <el-menu-item index="4">关于我</el-menu-item>
      <el-menu-item index="5">联系</el-menu-item>
    </el-menu>

    <!-- 轮播图区域 -->
    <div class="carousel-container">
      <el-carousel height="400px" indicator-position="outside">
        <el-carousel-item v-for="item in carouselItems" :key="item.id">
          <img :src="item.image" :alt="item.title" class="carousel-image" />
          <div class="carousel-text">
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 主体内容区域 -->
    <div class="main-container">
      <!-- 文章介绍区域 -->
      <div class="articles-section">
        <h2 class="section-title">最新文章</h2>
        <div class="article-list">
          <el-card 
            v-for="article in articles" 
            :key="article.id" 
            class="article-card"
            shadow="hover"
          >
            <div slot="header" class="article-header">
              <span>{{ article.title }}</span>
              <el-tag size="mini" :type="getTagType(article.category)">{{ article.category }}</el-tag>
            </div>
            <div class="article-content">
              <img :src="article.image" :alt="article.title" class="article-image" />
              <p>{{ article.excerpt }}</p>
              <div class="article-meta">
                <span><i class="el-icon-date"></i> {{ article.date }}</span>
                <span><i class="el-icon-view"></i> {{ article.views }} 阅读</span>
              </div>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 个人信息区域 -->
      <div class="sidebar">
        <el-card class="profile-card">
          <div slot="header" class="profile-header">
            <span>关于我</span>
          </div>
          <div class="profile-content">
            <img src="https://picsum.photos/150/150" alt="个人头像" class="avatar" />
            <h3>张三</h3>
            <p class="bio">前端开发工程师，热爱技术分享，专注于Vue.js和移动端开发。</p>
            <div class="social-links">
              <el-link href="#" target="_blank" icon="el-icon-platform-eleme">GitHub</el-link>
              <el-link href="#" target="_blank" icon="el-icon-message">微博</el-link>
            </div>
          </div>
        </el-card>

        <el-card class="categories-card">
          <div slot="header" class="categories-header">
            <span>文章分类</span>
          </div>
          <el-tag 
            v-for="category in categories" 
            :key="category.id" 
            :type="getTagType(category.name)"
            class="category-tag"
          >
            {{ category.name }} ({{ category.count }})
          </el-tag>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BlogHome',
  data() {
    return {
      activeIndex: '1',
      carouselItems: [
        {
          id: 1,
          title: 'Vue.js开发实战',
          description: '深入理解Vue组件化开发的核心理念与实践技巧',
          image: 'https://picsum.photos/800/400?random=1'
        },
        {
          id: 2,
          title: '响应式设计新趋势',
          description: '探索2023年响应式网页设计的最新趋势和技术',
          image: 'https://picsum.photos/800/400?random=2'
        },
        {
          id: 3,
          title: '前端性能优化',
          description: '从加载优化到渲染优化，全面提升用户体验',
          image: 'https://picsum.photos/800/400?random=3'
        }
      ],
      articles: [
        {
          id: 1,
          title: 'Vue 3 Composition API详解',
          category: 'Vue.js',
          excerpt: 'Composition API是Vue 3的重要特性，它提供了一种更灵活的方式来组织和重用组件逻辑...',
          image: 'https://picsum.photos/300/200?random=4',
          date: '2023-06-15',
          views: 1280
        },
        {
          id: 2,
          title: 'CSS Grid布局完全指南',
          category: 'CSS',
          excerpt: 'Grid布局是CSS中强大的二维布局系统，能够轻松创建复杂的网页布局结构...',
          image: 'https://picsum.photos/300/200?random=5',
          date: '2023-06-10',
          views: 950
        },
        {
          id: 3,
          title: 'JavaScript异步编程演进',
          category: 'JavaScript',
          excerpt: '从回调函数到Promise再到async/await，全面解析JavaScript异步编程的发展历程...',
          image: 'https://picsum.photos/300/200?random=6',
          date: '2023-06-05',
          views: 1420
        }
      ],
      categories: [
        { id: 1, name: 'Vue.js', count: 12 },
        { id: 2, name: 'React', count: 8 },
        { id: 3, name: 'JavaScript', count: 15 },
        { id: 4, name: 'CSS', count: 7 },
        { id: 5, name: 'Node.js', count: 5 },
        { id: 6, name: '性能优化', count: 9 }
      ]
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    getTagType(category) {
      const tagMap = {
        'Vue.js': 'success',
        'React': 'info',
        'JavaScript': 'warning',
        'CSS': 'danger',
        'Node.js': '',
        '性能优化': 'primary'
      };
      return tagMap[category] || 'info';
    }
  }
}
</script>

<style scoped>
.blog-home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 导航栏样式 */
.el-menu {
  border-radius: 4px;
  margin-bottom: 20px;
}

/* 轮播图样式 */
.carousel-container {
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 20px;
}

.carousel-text h2 {
  margin: 0 0 10px 0;
  font-size: 24px;
}

.carousel-text p {
  margin: 0;
  font-size: 16px;
}

/* 主体内容布局 */
.main-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 40px;
}

/* 文章区域 */
.articles-section {
  flex: 1;
  min-width: 300px;
}

.section-title {
  font-size: 24px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409EFF;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-card {
  border-radius: 8px;
  overflow: hidden;
}

.article-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article-content {
  padding: 10px 0;
}

.article-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 15px;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  color: #999;
  font-size: 14px;
}

/* 侧边栏 */
.sidebar {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-card,
.categories-card {
  border-radius: 8px;
  overflow: hidden;
}

.profile-content {
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
}

.bio {
  margin: 15px 0;
  color: #666;
  line-height: 1.6;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}

.categories-header {
  font-weight: bold;
}

.category-tag {
  margin: 0 5px 10px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
  }
  
  .carousel-text h2 {
    font-size: 20px;
  }
  
  .carousel-text p {
    font-size: 14px;
  }
}
</style>